<template>
    <div class="banner-content">
        <div class="desc-box">
            <v-parallax
                    dark
                    src="../../assets/vbanner.jpg"
                    height="150"
            >
                <v-row
                        align="center"
                        justify="center"
                >
                    <v-col
                            class="text-center"
                            cols="12"
                    >
                        <h1 class="display-1 font-weight-thin mb-4">
                            Wetcland Minecraft 服务器
                        </h1>
                        <h4 class="subheading">
                            直连IP: mc.wetcland.cn
                        </h4>
                    </v-col>
                </v-row>
            </v-parallax>
        </div>
        <template>
            <v-carousel
                    cycle
                    height="750"
                    hide-delimiter-background
                    show-arrows-on-hover
            >
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/1.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/2.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/3.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/4.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/5.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
                <v-carousel-item>
                    <v-sheet height="100%">
                        <v-row class="fill-height" align="center" justify="center">
                            <div class="display-3">
                                <img src="../../assets/img/6.png" alt="">
                            </div>
                        </v-row>
                    </v-sheet>
                </v-carousel-item>
            </v-carousel>
        </template>
    </div>
</template>

<script>
    export default {
        name: "BannerContent",
        data () {
            return {
                colors: [
                    'indigo',
                    'warning',
                    'pink darken-2',
                    'red lighten-1',
                    'deep-purple accent-4',
                    'pink darken-2',
                    'red lighten-1',
                ],
                slides: [
                    '@/assets/img/1.png',
                    '../../assets/img/2.png',
                    '../../assets/img/3.png',
                    '../../assets/img/4.png',
                    '../../assets/img/5.png',
                    '../../assets/img/6.png',
                ],
            }
        },
    }
</script>

<style scoped>

</style>
